<template>
	<view :class="[config.style]">
		<view class="muu-navbar" >
			<view class="item" v-for="(item,key) in config.footer.data" v-bind:key="item.link.type" v-bind:type="item.link.type" @click="util.goToLink(item.link)">
				<view class="icon">
					<image :mode="item.mode" :src="item.icon_url" class="image"></image>
				</view>
				<view class="title">{{item.nav_title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		props: {

		},
		data() {
			return {
				
			}
		},
		created() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.muu-navbar {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background-color: #ffffff;
		display: flex;
		border-top:2rpx solid #f4f6f7!important;
		padding-top: 15rpx;
		padding-bottom: 5rpx;
		z-index: 98;
		height: 90rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		box-sizing: content-box;
		.active {
			color: #039be5;
		}
		.item {
			flex: 1;
			display: block;
			position: relative;
			height: 90rpx;
			text-align: center;
			vertical-align: middle;
			.icon {
				display:block;
				.image {
					display:block;
					padding:0;
					width: 52rpx;
					height: 52rpx;
					margin:0 auto;
				}
			}
			
			.title {
				font-size: 24rpx;
				color: #666;
				line-height: 38rpx;
			}
		}
	}
</style>
